<template>
  <div>
    <div class="list-head nav-wap">
      <div class="nav-content auto flex align-c">
        <!--左边-->
        <div class="left-cont fz16 flex align-c pos-a nav-left">
          <img src="@/assets/logo2.png" />
          <a
            v-for="(item, index) in nav"
            b-1
            :key="index"
            :href="item.url"
            :class="{ ative: tag == index }"
            :ref="`a-${index}`"
            @click="gotoRoute"
            @mouseover="mouseNav(index)"
          >
            {{ item.name }}
          </a>
          <div class="pos-b" :style="style"></div>
        </div>

        <!--搜索-->
        <div class="head-search flex align-c">
         
        </div>

        <!--右边-->
        <div class="right-cont flex align-c pos-a">
          <div class="shop-num pos-b cur">{{ carNum }}</div>
          <img src="@/assets/shop.png" width="22" style="cursor:pointer" @click="carFlag = true" class="cur" />

          <span style="margin-left: 32px" @click="rightJump('recharge')">充值</span>
          <span @click="rightJump('upload')">上传</span>
          <span @click="rightJump('collection')">收藏</span>
          <!--登陆后才显示-->
          <span @click="rightJump('money')">868.8元</span>
          <el-dropdown @command="handleDropmenu">
            <span href="#" class="ava-img flex align-c">
              <img src="@/assets/ava.png" class="ww1" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command='userCenter'>管理中心</el-dropdown-item>
              <el-dropdown-item command='msg'>反馈信息</el-dropdown-item>
              <el-dropdown-item command='logout'>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!--登陆后才显示-->
        </div>
      </div>
    </div>

    <!--nav2-->
    <div class="list-nav-senod nav-senod ww1 pos-a">
      <div class="nav-senod-content auto" flex flex-c space-be>
        <div class="left" style="display: block">
          <a v-for="(item, index) in nav2[tag]" :key="index" @click="gotoRoute">
            {{ item.name }}
          </a>
        </div>

        <div class="right scroll-list">
          <p>
            <i>19秒前</i>
            <i>创先锋</i>
            <i>个人授权</i>
          </p>
          <p>
            <i>10秒前</i>
            <i>白羊星</i>
            <i>个人授权</i>
          </p>
        </div>
      </div>
    </div>
    <Car :flag.sync="carFlag"></Car>
  </div>
</template>

<script>
import $http from "@/api/home/home"
import Car from '@/components/Car.vue'
import carHttp from "@/api/info/car";

export default {
  name: "AppHeader",
  components: {
    Car
  },
  data() {
    return {
      carNum: 0,
      restaurants: [],
      state: '',
      timeout:  null,

      carFlag: false,
      keyword: '',
      url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F6a%2F51%2F24%2F6a512471795e0824472d6c85cf22bdb2.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638627584&t=e1b7bf0b3bc1315b72f5a3421077d905",
      nav: [
        {name: '3D模型'},
        {name: '文艺体娱'}
      ],
      tag: 0, //默认nav
      ele: "", //默认的第一个a元素
      style: {
        left: 0,
        width: 0,
      }, //修改下划线位置

      //搜索框
      select: "",
      input3: "",
      tagStyle: {},
      tagArr: ["3D模型", "文艺体娱"],
      tagText: "3D模型",

      nav2: [
      ],
    };
  },

  created() {
    this.getCarList()
    this.cmsCategory();
    this.$nextTick(() => {
      //初始化导航下划线位置

      this.mouseNav(0);
    });
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {
    getCarList() {
      carHttp.carList({
        userId: sessionStorage.getItem('userId'),
      }).then(res => {
        this.carNum = res.data.carCount
      })
    },
    /**
     * 获取栏目
     */
    cmsCategory() {
      this.nav = [];
      this.nav2 = [];
      $http.cmsCategory().then((res) => {
        console.log(res);
        res.data.forEach(item => {
          this.nav.push({
            name: item.categoryName,
            id: item.categoryId
          })
          this.nav2.push(item.children);
        })
      })
    },
    /****
     * 路由跳转
     */
    gotoRoute() {
      this.$router.push('/videoCenter')
    },
     // 头部右侧跳转
    rightJump(type){
      if(type == 'recharge') {
        this.$router.push('/account/recharge')
      }else if(type == 'upload') {
        this.$router.push('/account/upload')
      } else if (type == 'collection') {
        this.$router.push('/account/collection')
      } else if (type == 'money') {
        this.$router.push('/account/expenseDetail')
      }
    },
    // 头像框下拉菜单
    handleDropmenu(value) {
      if(value == 'userCenter') {
        this.$router.push('/account/info')
      } else if (value == 'msg') {
        this.$router.push('/account/feedback')
      }
    },
    // 搜索事件
    goSearch() {
      if(!this.keyword) {
        this.$message('请输入搜索的内容')
      }
      this.$router.push({
        path: `/videoCenter/searchList/${this.keyword}`
      })
    },
    //鼠标经过
    mouseNav(index) {
      //offsetWidth
      this.tag = index;
      this.ele = this.$refs[`a-${index}`];

      const { offsetWidth, offsetLeft } = this.ele[0];
      this.style = {
        width: `${offsetWidth}px`,
        left: `${offsetLeft}px`,
      };
    },

    showTag() {
      this.tagStyle = {
        display: "block",
        transform: "translateY(0)",
      };
    },
    hideTag(item) {
      this.tagText = item;
      this.tagStyle = {
        display: "none",
      };
    },

     querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
        ];
      },
      handleSelect(item) {
        console.log(item);
      },
      handleIconClick(ev) {
        console.log(ev);
      }
  },
};
</script>

<style scoped>
 
  .my-autocomplete li {
    line-height: normal;
    padding: 7px;
  }

  .my-autocomplete .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .my-autocomplete .addr {
    font-size: 12px;
    color: #b4b4b4;
  }

  .my-autocomplete .highlighted .addr {
    color: #ddd;
  }
  

  /* .nav-senod-content a:hover,
  .nav-content a:hover,
  .nav-content a.ative,
  [active],
  .bar2-cont span:hover {
    border-bottom: 2px solid #333;
  } */

.nav-wap {
  position: relative;
  z-index: 3;
  height: 60px;
  line-height: 60px;
}
.nav-content,
.nav-senod-content {
  width: 95%;
}
.nav-content a {
  color: #000;
}
.nav-left .pos-b {
  height: 2px;
  width: auto;
  background: #111;
  top: 95%;
  left: 0;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.left-cont img {
  vertical-align: middle;
  width: 71px;
  height: auto;
}
.left-cont a {
  margin: 0 12px;
  font-size: var(--title);
  font-size: 20px;
}

.right-cont {
  font-size: var(--content);
  overflow: hidden;
}

.right-cont span {
  margin-left: 22px;
  cursor: pointer;
  color: #444;
}
.right-cont span:hover {
  color: #000;
  font-weight: 500;
}
.right-cont dt {
  width: 32%;
  overflow: hidden;
}
.right-cont .ava-img {
  width: 20px;
  height: 20px;
}
.right-cont .ava-img img {
  object-fit: cover;
  height: 100%;
  vertical-align: sub;
}
.head-search {
  border-right: none;
  height: 38px;
  line-height: 38px;
  flex: 1;
  margin-right: 12px;
  position: relative;
}
.head-search >>> .el-autocomplete {
  position: absolute;
  right: 0;
  width: 340px;
}
.head-search >>> .el-input__inner {
  height: 34px;
  line-height: 34px;
  background-color: #484e52;
  border: 1px solid transparent;
  color: #d0d0d0;
}
.head-search >>> .el-input__suffix {
  right: 12px;
  font-size: 18px;
}
.head-search input {
  border: none;
  outline: none;
  background: none;
  flex: 1;
  color: var(--nav-color);
  text-indent: 2%;
}
.tag-box dt {
  margin-right: 20px;
}
.tag-box dd {
  background: var(--search-btn-color);
  padding: 0 12px;
  border: 1px solid var(--search-btn-color);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.tag-wap {
  color: var(--color-black);
  font-size: var(--chilid-nav-bg);
  padding: 0 10px;
  text-transform: uppercase;
}
.tag-list {
  background: #fff;
  padding: 0px 20px;
  left: 0;
  top: 100%;
  width: 100%;
  min-height: 58px;
  display: none;
  -webkit-box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
}
.tag-list li {
  margin: 8px 0;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
  text-transform: uppercase;
}
.tag-list li:hover {
  color: var(--nav-hover-red);
}

.shop-num {
  background: red;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  line-height: 20px;
  text-align: center;
  font-size: 11px;
  color: #fff;
  left: 15px;
  top: 8px;
}
.shop-num.no-num {
  background: var(--grey);
}

.login-out {
  font-size: var(--title-small);
  color: var(--nav-color);
}

.list-head.nav-wap {
  background: #fff;
}
.nav-wap .head-search {
  /* margin: 0 auto;
  max-width: 400px;
  margin-right: 38px;
  border-radius: 6px;
  padding-left: 14px; */
  margin: 0 60px;
}

.list-nav-senod.list-nav-senod {
  background: #e5e5e5;
}
.nav-senod {
  background: var(--nav-bg);
  height: 38px;
  line-height: 38px;
  color: #444;
  z-index: 2;
}

.nav-senod-content .left {
  display: none;
}
.nav-senod-content .left.nav-senod-show {
  display: block;
}

.nav-senod-content,
.scroll-list {
  overflow: hidden;
}
.nav-senod a {
  color: #444;
  margin-right: 12px;
  font-size: var(--title-small);
}
.nav-senod a:hover {
  color: #000;
}
.nav-senod .right {
  overflow: hidden;
  text-align: right;
  font-size: 13px;
  height: 38px;
}
.info-arrow >>> .popper__arrow {
  display: none;
}

@media screen and (max-width: 900px) {
  .el-dropdown-menu__item {
    width: 140px;
  }
}
@media screen and (max-width: 1300px) {
  .bar-l a {
    font-size: 14px;
  }
}

@media screen and (max-width: 1660px) {
  .search-wap {
    width: 30%;
    flex: 1 1 30%;
  }
}

@media screen and (max-width: 1400px) {
  .search >>> .el-input {
    width: 70%;
  }
  .search-tag {
    width: 30%;
  }
}
.bar2-cont span {
  cursor: pointer;
  margin-right: 2%;
  font-size: var(--title-small);
}
</style>
